import React from "react";

class StateDemo extends React.Component {
  constructor(props) {
    super(props)

    // 1.state要在构造函数中定义
    this.state = {
      count: 1
    }
  }

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.increase}>累加</button>
      </div>
    )
  }

  increase = () => {
    // 2.不能直接修改state，需要通过this.setState()
    // this.setState({
    //   count: this.state.count + 1
    // })
    // 操作数组和对象常见形式

    3.setState常规使用时异步 放在回调函数中是同步
    this.setState({
      count: this.state.count + 1
    })
    console.log('count', this.state.count);

    this.setState( {
      count: this.state.count + 1
    }, () => {
      console.log('callback', this.state.count);
    })

    // setTimeout是同步的
    setTimeout(() => {
      this.setState({
        count: this.state.count + 1
      })
      console.log(this.state.count);
    }, 0)
    // 自己定义DOM事件，setState是同步的，在componentDidMount中

    // 4.多个state同时操作会合并为一个，因为setState是异步操作
    // this.setState({
    //   count: this.state.count + 1
    // })
    // this.setState({
    //   count: this.state.count + 1
    // })
    // this.setState({
    //   count: this.state.count + 1
    // })
    
    // 使用函数不会被合并
    // this.setState((prevState, props) => {
    //   return {
    //     count: prevState.count + 1
    //   }
    // })
    // this.setState((prevState, props) => {
    //   return {
    //     count: prevState.count + 1
    //   }
    // })
    // this.setState((prevState, props) => {
    //   return {
    //     count: prevState.count + 1
    //   }
    // })

  }
  bodyClickHandler = () => {
    setTimeout(() => {
      this.setState({
        count: this.state.count + 1
      })
      console.log(this.state.count);
    }, 0)
  }

  // componentDidMount() {
  //   document.body.addEventListener('click', this.bodyClickHandler)
  // }

  // componentWillUnmount() {
  //   // 及时销毁自定义DOM事件
  //   document.body.removeEventListener('click', this.bodyClickHandler)

  // }
}

export default StateDemo